<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .searchbox {
            width: 100%;
            height: 100px;
            background-image: linear-gradient(45deg, rgb(0, 165, 254), rgb(0, 130, 254));
        }

        .searchbox h2 {
            color: #fff;
        }

        .searchbox input {
            width: 95%;
            height: 40px;
            margin: 0 2.5%;
            text-align: center;
            border-radius: 20px;
            border: none;
            outline: none;
            margin-top: 5%;
        }

        .banner {
            width: 94%;
            height: 100px;
            border-radius: 10px;
            margin: 3%;
        }

        .nxh {
            margin-left: 3%;
            margin-bottom: 2%;
        }

        .like {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            text-align: center;
        }

        .like div.active {
            font-weight: bolder;
            color: red;
        }

        .Lable {
            width: 94%;
            margin: auto;
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
        }

        .Lable .box {
            background-color: #f5f5f5;
            padding: 5px 15px;
            font-size: 12px;
            border-radius: 5px;
        }

        .store {
            width: 94%;
            margin: auto;
            margin-top: 20px;
        }

        .store_1 img {
            width: 100px;
            height: 100px;
            float: left;
        }

        .store_1 .title {
            display: inline-block;
            margin-left: 10px;
            margin-bottom: 5px;
            font-weight: bolder;
        }

        .store_1 .score {
            color: orange;
            font-size: 10px;
            margin-left: 10px;
        }

        .store_1 .num {
            color: #999;
            font-size: 10px;
            margin-left: 10px;
        }

        .store_1 .amount {
            color: #999;
            font-size: 10px;
            margin-left: 10px;
        }

        .store_1 .remote {
            color: #999;
            font-size: 10px;
        }

        .store_1 .min {
            color: #999;
            font-size: 10px;
            margin-left: 15px;
        }

        .store_1 .km {
            color: #999;
            font-size: 10px;
        }
        .store_1 .yzcf{
            margin-left: 10px;
            background-color: rgb(255, 238, 224);
            color: orangered;
            font-size: 10px;
        }
        .store_1 .pm {
            background-color: rgb(255, 238, 224);
            color: orangered;
            font-size: 10px;
        }
        ul{
            list-style: none;
            margin-top: 10px;
            margin-left: 100px;
        }
        li{
            font-size: 12px;
            float: left;
            text-align: center;
            width: 50px;
            height: 20px;
            border: 1px solid orangered;
            color: orangered;
            margin-left: 10px;
            line-height: 20px;
            border-radius: 4px;
        }
        .tabbar{
            position: fixed;
            bottom: 0;
            width: 100%;
            padding: 10px;
            border-top: 1px solid #ccc;
            box-sizing: border-box;
            display: flex;
            float: left;
            justify-content: space-around;
            text-align: center;
            line-height: 40px;
        }
        .tabbar div.active{
            color: blue;
            width: 25%;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="searchbox">
            <h2>饿了么</h2>
            <input type="text" placeholder="输入商家、商品名称">
        </div>
        <img class="banner" src="./img/1.jpg" alt="">
        <h2 class="nxh">猜你喜欢</h2>
        <div class="like">
            <div :class="{active: currentIndex0 == index }" @click="handleClick(index)" class="Zh"
                v-for="(item,index) in list">{{item}}</div>
        </div>
        <div class="Lable">
            <div class="box">年货节热卖</div>
            <div class="box">津贴联盟</div>
            <div class="box">满减优惠</div>
            <div class="box">品质联盟</div>
        </div>
        <div class="store">
            <div class="store_1" v-for="(item,index) in storeArr">
                <img :src="item.img" alt="">
                <span class="title">{{item.title}}</span>
                <br>
                <span class="score">{{item.score}}</span>
                <span class="num">月售{{item.num}}</span>
                <br>
                <span class="amount">起送￥{{item.amount}}</span>
                <span class="remote">远距离配送￥{{item.remote}}</span>
                <span class="min">{{item.min}}分钟</span>
                <span class="km">{{item.km}}km</span>
                <br>
                <span class="yzcf">{{item.yzcf}}</span>
                <span class="pm">{{item.pm}}</span>
                <br>
                <ul>
                    <li class="mj" v-for="(item,index) in item.mj">{{item}}</li>
                </ul>
            </div>
        </div>
        <div class="tabbar">
            <div  :class="{active: currentIndex1 == index }"  @click="handleClickbottom(index)" class="bottom" v-for="(item,index) in bottomArr">
                <div class="name">{{item.name}}</div>
            </div>
        </div>
    </div>
    <script src="./vue-2.5.21.js"></script>
    <script src="./1.index.js"></script>
</body>

</html>